<style>
    /* 系统标签 */
    .ly-tag { display: inline-block; border-radius: 2px; margin-right: 5px;}
    .ly-tag-small { padding: 0 5px 0 3px; line-height: 18px; font-size: 10px; }
    .ly-tag-medium { padding: 0 6px; line-height: 24px; font-size: 12px; }
    .ly-tag-big {  padding: 0 9px; line-height: 30px; font-size: 14px;  }
    .ly-tag.dark { color: #fff; font-size: 10px; background-color: #8492A6; border: 1px solid #7f8a9a;}
    .ly-tag.black { color: #DED7A9;font-size: 10px; background-color: #252424; border: 1px solid #000;}

    .ly-tag.gray { color: #475669; background-color: #E5E9F2; border: 1px solid #d8dce4;}
    .ly-tag.blue { color: var(--primary); background-color: rgba(32, 160, 255, .1); border: 1px solid rgba(32, 160, 255, .2); }
    .ly-tag.green { color: #10AD57; background-color: rgba(19, 206, 102, .1); border: 1px solid rgba(19, 206, 102, .2); }
    .ly-tag.yellow { color: #E3AB29; background-color: rgba(247, 186, 42, .1); border: 1px solid rgba(247, 186, 42, .2); }
    .ly-tag.red { color: #FF4949; background-color: rgba(255, 73, 73, .1); border:1px solid rgba(243, 69, 69, 0.1); }
    .ly-tag.purple { color: #6A567C; background-color: #F0E7F9;  border:1px solid #e1d9e8;}
    .ly-tag.no-border { border: none; }
    .ly-tag .el-icon-close:hover{color: #fff }
    .ly-tag.dark .el-icon-close:hover{background-color:#677282 }
    .ly-tag.gray .el-icon-close:hover{background-color:#cbcfd6}
    .ly-tag.blue .el-icon-close:hover{background-color:rgba(32, 160, 255, .4);}
    .ly-tag.green .el-icon-close:hover{background-color:rgba(19, 206, 102, .4);}
    .ly-tag.yellow .el-icon-close:hover{background-color:rgba(247, 186, 42, .4);}
    .ly-tag.red .el-icon-close:hover{background-color:rgba(255, 73, 73, .4);}
    .ly-tag.purple .el-icon-close:hover{background-color:#d9d1e0 }

    .ly-tag .el-icon-close {border-radius: 50%;  text-align: center;  position: relative;  cursor: pointer;  font-size: 12px;  height: 16px;  width: 16px;  line-height: 16px;  vertical-align: middle;  top: -1px;  right: -5px;

    }
</style>
<template>
    <span :style="{'font-weight': bold?'bold':500}" :class="['ly-tag-'+size,color,border||border=='false'?'':'no-border']"  class="ly-tag"><slot></slot>
    <i @click="onClose" v-if="closeable" class="el-tag__close el-icon-close"></i>
    </span>
</template>
<script>
    Rap.define('','',function () {
        return {
            name:'ly-tag',
            props: {
                bold:Boolean,
                closeable:{
                    type:Boolean,
                    default:false
                },
                'border':{
                        type:Boolean,
                        default:true
                },
                color:{
                    default:'gray'
                },
                size:{
                    default: 'medium'
                }
            },watch:{
                closeable:function (value) {
                }
            },methods:{
                onClose:function () {
                    this.$emit('close');
                }
            }
        }
    });
</script>
